<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>

	<style>
	body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
	p {margin:0 0 15px 0;}
	a,a:visited {color:#7f0055;}
	select {background:#ffffe1;}
	button {margin-top:5px;}
	h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
	h2 {font-size:22px;margin:0;color:black;font-weight:normal;}
	h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
	code {color:#0080c0;font-size:13px;font-weight:bold;}
	#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
	#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
	#languages {margin:5px 0;}
	ol {padding:0 0 15px 30px;margin:0;}
	ol li {margin:5px 0 10px 0;}
	#default {font-weight:bold;color:red;}
	#codepress-load-code, #load-this {display:none;}
	</style>
	
	<script>
	last = null;
	function edit(file,obj) {
		if(last == null) last = document.getElementById('default');
		last.style.fontWeight = 'normal';
		last.style.color = 'black';
		obj.style.fontWeight = 'bold';
		obj.style.color = 'red';
		last = obj;
		document.getElementById('codepress').src='codepress.php?action=edit&file='+file;
	}
	</script>
</head>

<body>
<div id="container">

<div id="logo">
	<h1>CodePress</h1>
	<h2>Online Real Time Syntax Highlighting Editor</h2>
</div>

<div id="main">
	<h4>
	CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.
	</h4>
	
	<p>
	It's a lightweight, extensible and simple (compared to similar web-based code editors) script with very good performance with large files (tested with up to 3000 lines).
	</p>
	
	<p>Go to <strong><a href="http://codepress.fermads.net/">http://codepress.fermads.net/</a></strong> for updates.</p>

<h3>Demo</h3>
<p>Example shows syntax highlighting for <strong>PHP</strong>, <strong>Java</strong>, <strong>JavaScript</strong>, <strong>Perl</strong>, <strong>HTML</strong> and <strong>CSS</strong>.</p>

<div id="languages">
	<em>choose language:</em> 
	<button onclick="edit('codepress.php',this)" id="default">PHP</button> 
	<button onclick="edit('codepress.js',this)">JavaScript</button> 
	<button onclick="edit('FileManager.java',this)">Java</button>
	<button onclick="edit('example.pl',this)">Perl</button>
	<button onclick="edit('example.sql',this)">SQL</button> 	
	<button onclick="edit('index.html',this)">HTML</button> 
	<button onclick="edit('styles.css',this)">CSS</button> 	
	<button onclick="edit('loremipsum.txt',this)">plain text</button><br />
</div>
<iframe id="codepress" name="codepress" src="codepress.php?action=edit&file=codepress.php" width="100%" height="400"></iframe><br />

<!-- uncomment textarea below to have the code inside it loaded on page load-->
<!-- textarea id="codepress-onload" lang="php"><html>
<head>
	<title>CodePress setCode() example</title>
</head>
<body id="home">
&lt;?php
	// HTML entities must be escaped with &amp;amp;
	echo "Code loaded from hidden textarea";
?&gt;
</body>
</html></textarea -->

<textarea id="codepress-ondemand" lang="javascript">/* CodePress example */
for (i=0;i<10;i++) {
	alert(10);
	document.write("Test");
}
</textarea>

<button onclick="alert(CodePress.getCode())"><strong>get code from editor</strong></button> :: Example getting (<code>alert()</code>) original code from CodePress window<br />
<button onclick="CodePress.setCode('codepress-ondemand')"><strong>set code to editor</strong></button> :: Example setting code from a hidden textarea to CodePress window


<h3>How to use it</h3>
Considering you already have a PHP server and http://yourserver/codepress/codepress.php open an empty file editor window<br />
<br />


<strong>Method 1: Loading files directly from server</strong>
<ol>
	<li>Put the iframe below on your page:<br>
	<code>&lt;iframe id="codepress" src="/codepress/codepress.php?action=edit&file=[file]" width="100%" height="400"&gt;&lt;/iframe&gt;</code><br />
	Where <code>[file]</code> is the filename (e.g. test.php) to open. </li>
	<li>Configure your root path <code>$path['files']</code> on codepress.php </li>
</ol>

<strong>Method 2: Loading code from textarea (on page load)</strong>&darr;<br />
<ol>
	<li>Put the iframe below on your page:<br>
	<code>&lt;iframe id="codepress" src="/codepress/codepress.php" width="100%" height="400"&gt;&lt;/iframe&gt;</code></li>
	<li>Put the textarea below somewhere on your page:<br>
	<code>&lt;textarea id="codepress-onload" lang="[language]"&gt;/*your code here*/&lt;/textarea&gt;</code><br />
	Where <code>[language]</code> is the language of your source code (java, javascript, php, perl, html, css).
	</li>
</ol>

<strong>Method 3: Loading code from textarea (on demand)</strong>&darr;<br />
<ol>
	<li>Put the iframe below on your page:<br>
	<code>&lt;iframe id="codepress" src="/codepress/codepress.php" width="100%" height="400"&gt;&lt;/iframe&gt;</code>
	</li>
	<li>
	Put the textarea below on your page:<br>
	<code>&lt;textarea id="codepress-ondemand" lang="[language]"&gt;/*your code here*/&lt;/textarea&gt;</code>
	</li>
	<li>Put on your page a call to the CodePress.setCode() function:<br />
	<code>&lt;button onclick="CodePress.setCode('codepress-ondemand')"&gt;Load my code&lt;/button&gt;</code>
	</li>
	You can call <code>CodePress.setCode()</code> passing as a parameter any id from any other textarea you wish.
	Just make sure to hide it with display:none. You can also pass language and source code as parameters. e.g.<br />
	<code>CodePress.setCode('javascript',document.someForm.someTextarea.value);</code><br />
	<code>CodePress.setCode('someTextareaId');</code>
</ol>


<strong>Getting code from CodePress window</strong><br />
Considering you have done one of the 3 methods above
<ol>
	<li>Just call CodePress.getCode()<br>
	e.g. <code>alert(CodePress.getCode())</code><br />
	<code>var myCode = CodePress.getCode()</code>
	</li>
</ol>

<h3>About</h3>

<p>
	CodePress is distributed under the <a href="http://www.opensource.org/licenses/lgpl-license.php">LGPL</a>. You can use it as you want. Just keep my credits somewhere around.
</p>
<p>
Thanks.
</p>

<a href="mailto:fermads@gmail.com">Fernando M.A.d.S.</a>



</div><!--/container-->
</body>
</html>
